<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen" />
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen" />


    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-1.8.3.min.js"></script>

    <!-- 引入时间控件 -->
    <script type="text/javascript"
            src="/resources/widget/My97DatePicker/WdatePicker.js"></script>

    <!-- 添加弹出框依赖 -->
    <script type="text/javascript"
            src="resources/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <link rel="stylesheet" href="resources/widget/dialog/jquery-ui.min.css" type="text/css"
          media="screen" />

    <!-- 动态表单的js -->
    <script type="text/javascript"
        src="resources/js/dynamic-form.js"></script>

    <style>
        .go{
            display: none;
        }
        .time {
            display: block;
        }
        .days {
            display: none;
        }
    </style>

    <script>
        /**
         * 页面加载时触发
         */
        $(function(){
            getTemplateList();
        });


        /**
         * 改变优惠券的发行方式
         */
        function changeMethod(ele){
            if (ele == 1) {
                $(".go").show();
            } else {
                $(".go").hide();
            }
        }

        /**
         * 改变优惠券发行的有效方式
         */
        function changeType(ele){
            if (ele == 0){
                //时间范围有效
                $(".time").show();
                $(".days").hide();
            } else {
                //领取时效
                $(".time").hide();
                $(".days").show();
            }
        }
    </script>

</head>
<body>
<div id="main-content">
    <div class="content-box">
        <div class="content-box-content">
            <div class="tab-content default-tab" id="tab2">
                <form id="couponForm" action="/system/coupon/couponadd" method="post">
                    <input type="hidden" name="ruleInfo" id="ruleInfo"/>
                    <input type="hidden" name="limitInfo" id="limitInfo"/>
                    <fieldset>

                        <p>
                            <label>优惠券标题</label> <input
                                class="text-input small-input" type="text"
                                name="subject" />
                        </p>

                        <p>
                            <label>优惠券副标题</label> <input
                                class="text-input small-input" type="text"
                                name="subtitle" />
                        </p>

                        <p>
                            <label>使用类型</label>
                                <input
                                    type="radio" name="utype" value="0" checked/> 互斥卷
                                <input
                                    type="radio" name="utype" value="1"/> 叠加卷
                        </p>

                        <p>
                            <label>优先级</label> <input
                                class="text-input small-input" type="text"
                                name="priority" />
                        </p>

                        <p>
                            <label>使用说明</label> <input
                                class="text-input large-input" type="text"
                                name="content" />
                        </p>

                        <p>
                            <label> 选择优惠规则：</label>
                            <select id="rule_template" onchange="createDynamicField(0, this);">
                                <option>--请选择--</option>
                            </select>
                        </p>

                        <!-- 显示优惠规则的动态字段 -->
                        <div id="ruleFields"></div>

                        <p>
                            <label> 选择使用限制：</label>
                            <select id="limit_template" onchange="createDynamicField(1, this);">
                                <option>--请选择--</option>
                            </select>
                        </p>

                        <!-- 显示使用限制的动态字段 -->
                        <div id="limitFields"></div>

                        <p>
                            <label> 选择发行方式：</label>
                            <select name="method" onchange="changeMethod(this.value);">
                                <option value="0">领劵中心</option>
                                <option value="1">定时抢劵</option>
                            </select>
                        </p>

                        <p class="go">
                            <label>* 抢劵开始时间</label> <input
                                class="text-input small-input" type="text"
                                name="goStartTime" onClick="WdatePicker({minDate:'%y-%M-%d 00:00:00',startDate:'%y-%M-%d %H:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                        </p>

                        <p class="go">
                            <label>* 抢劵结束时间</label> <input
                                class="text-input small-input" type="text"
                                name="goStopTime" onClick="WdatePicker({minDate:'%y-%M-%d 00:00:00',startDate:'%y-%M-%d {%H+2}:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                        </p>

                        <p>
                            <label> 选择优惠卷有效类型：</label>
                            <select name="type" onchange="changeType(this.value);">
                                <option value="0">时间范围有效</option>
                                <option value="1">领取时效</option>
                            </select>
                        </p>

                        <p class="time">
                            <label>有效开始时间</label> <input
                                class="text-input small-input" type="text"
                                name="beginTime" onClick="WdatePicker({minDate:'%y-%M-%d'})"/>
                        </p>

                        <p class="time">
                            <label>有效结束时间</label> <input
                                class="text-input small-input" type="text"
                                name="endTime" onClick="WdatePicker({minDate:'%y-%M-%d'})"/>
                        </p>

                        <p class="days">
                            <label>领取后的有效天数</label> <input
                                class="text-input small-input" type="text"
                                name="days" />
                        </p>

                        <p>
                            <label>发行的张数</label> <input
                                class="text-input small-input" type="text"
                                name="number" />
                        </p>


                        <p>
                            <input class="mybutton" type="button" onclick="submitCoupon();" value="提交" />
                        </p>
                    </fieldset>
                    <div class="clear"></div>
                    <!-- End .clear -->
                </form>
            </div>
            <!-- End #tab2 -->
        </div>
        <!-- End .content-box-content -->
    </div>
</div>




<!-- End #main-content -->
</body>
</html>